<template>
	<view>
		<!-- 顶部 -->
		<u-sticky :offsetTop="offsetTop">
			<view class="topWrapper">
				<view class="searchBox">
					<view class="search">
						<u--input v-model="inputValue" clearable border="none" fontSize="12" placeholder="按订单编号/客户名称查询"
							@blur="isSearch = false" @focus="isSearch = true" @change="searchChange" />
					</view>
				</view>
			</view>
		</u-sticky>


		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">
			<view class="orderItem" v-for="(item, index) in orderList" :key="index" @click.stop="chooseOrder(item)">
				<view style="display: inline-block;">
					<view class="flex-row-center-sb">
						<text class="title">订单号：{{ item.orderNo | filterNull }}</text>
						<text style="color: #00bfbf; max-width: 300rpx;margin-right: 20rpx;font-size: 28rpx;"
							v-if="item.orderStatus!=0">{{ item.orderStatus | shortOrderStatus }}</text>
						<text style="color: #00bfbf; max-width: 300rpx;margin-right: 20rpx;font-size: 28rpx;"
							v-else>{{item.rentPayType|rentPayType}}-{{item.orderStatus|shortOrderStatus}}</text>
					</view>

					<u-line color="#efefef" margin="0 0 30rpx 0"></u-line>

					<view class="text-line">
						<text class="text-name">预定车型:</text>
						<text class="text-value"
							v-if="item.orderStatus < 3 || item.orderStatus == 10">{{ item.modelName | filterNull }}</text>
						<text class="text-value"
							v-else>{{ item.carNo | filterNull }}&nbsp;&nbsp;(&nbsp;{{ item.modelName | filterNull }}&nbsp;)</text>
					</view>

					<view class="text-line flex-row-center" style="position: relative;">
						<text class="text-name">客户信息:</text>
						<text class="text-value" style="margin-right: 20rpx;">{{ item.memberName | filterNull }}</text>
						<view @click.stop="callPhone(item.memberPhone)">
							<u-icon name="phone-fill" color="#1673FF"></u-icon>
						</view>
						<view style="position: absolute;right: 20rpx; color: #1673FF;font-size: 28;">
							立即选择
						</view>
					</view>

					<view class="text-line">
						<text class="text-name">取还信息:</text>
						<view class="text-value flex-row-center">
							<text style="white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;max-width: 250rpx;">{{item.reserveTakeStoreName|filterNull}}</text>
							<text style="margin: 16rpx;">--</text>
							<text style="white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;max-width: 250rpx;">{{item.reserveAlsoStoreName|filterNull}}</text>
						</view>
					</view>
					<view>
						<view class="text-line">
							<view class="text-value start-time">预取:{{ item.rentalStartTime|filterNull }}</view>
							<view class="text-value end-time">预还:{{ item.rentalEndTime|filterNull }}</view>
						</view>
					</view>

					<view>
						<view class="text-line">
							<view class="text-value start-time" v-if="item.actualStartTime">
								实取:{{ item.actualStartTime }}</view>
							<view class="text-value end-time" v-if="item.actualEndTime">
								实还:{{ item.actualEndTime }}
							</view>
						</view>
					</view>
				</view>
			</view>
		</mescroll-body>

	</view>
</template>

<script>
	import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js';
	import * as secondedApi from '@/api/seconded-api.js';
	export default {
		mixins: [MescrollMixin], // 使用mixin

		data() {
			return {
				inputValue: '',
				orderList: [],
			};
		},

		onLoad() {
		},
		methods: {
			upCallback(page) {
				var params = {
					pageNum: page.num,
					pageSize: page.size,
					clickOrder : 1,
					// orderNo : this.inputValue||'',
				};
				secondedApi.orderList(this.toParams(params)).then(res => {
					//设置列表数据
					if (page.num == 1) this.orderList = []; //如果是第一页需手动制空列表
					this.orderList = this.orderList.concat(res.rows); //追加新数据
					this.mescroll.endBySize(res.rows.length, res.total);
				}).catch(() => {
					//联网失败, 结束加载
					this.mescroll.endErr();
				})
			},
			//搜索
			searchChange(value) {
				this.mescroll.triggerDownScroll();
			},
			// 拨打电话
			callPhone(phone) {
				uni.makePhoneCall({
					phoneNumber: phone
				});
			},
			chooseOrder(item) {
				uni.$emit('secondedOrder', item);
				uni.navigateBack()
			}

		}
	};
</script>

<style lang="scss" scoped>
	.topWrapper {
		background-color: #fff;

		.searchBox {
			padding: 20upx;
			display: flex;
			align-items: center;
			background-color: #fff;

			.city {
				font-size: 30upx;
				font-weight: bold;
				color: #333;
			}

			.search {
				flex: 1;
				padding: 0 20upx;
				margin: 0 20upx;
				height: 60upx;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 24upx;
				background-color: #ededed;
				border-radius: 8upx;
			}
		}
	}

	.orderItem {
		display: flex;
		flex-direction: column;
		background-color: white;
		border-radius: 8rpx;
		margin: 10rpx 20rpx;
		padding: 10rpx;

	}

	.title {
		height: 80rpx;
		line-height: 80rpx;
		font-size: 28rpx;
		color: #333;
		margin-left: 20rpx;
	}

	.text-warn {
		font-size: 24rpx;
		color: red;
		margin-right: 20rpx;
	}

	.text-warn-orange {
		color: yellow;
	}

	.btn-detail {
		width: 180rpx;
		height: 60rpx;
		border-radius: 50rpx;
		color: white;
		text-align: center;
		background-color: $uni-color-primary;
		font-size: 26rpx;
		line-height: 60rpx;
		margin: 10rpx 20rpx 10rpx;
		align-self: flex-end;
	}

	.end-time {
		color: #f59a23;
		font-size: 24rpx;
	}

	.start-time {
		color: #e65a6b;
		font-size: 24rpx;
		margin-right: 30rpx;
	}

	.title-box {
		/deep/ .u-icon {
			display: inline-block !important;
		}
	}

	.payCostItem {
		height: 80rpx;
		width: 600rpx;
		border-bottom: 1rpx solid #ededed;
	}

	.alertBtn {
		width: 200rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		background-color: #1673FF;
		color: #fff;
		border-radius: 8rpx;
		font-size: 28rpx;
	}

	.commitBtn {
		background-color: #1673ff;
		border-radius: 12rpx;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		color: #fff;
		width: 300rpx;
		margin-top: 30rpx;
	}
</style>
